<template>
  <div>
    <van-dropdown-menu>
  <!-- <van-dropdown-item v-model="value1" :options="option" /> -->
  <van-dropdown-item title="区域">
<van-picker :columns="columns" :default-index="0"/>
    <div class='btn'>
      <van-button class='leftBtn'> 取消</van-button>
      <van-button type="danger" block> 确认</van-button>
    </div>
  </van-dropdown-item>

  <van-dropdown-item title="方式">
<van-picker :columns="columns2" :default-index="0"/>
    <div class='btn'>
      <van-button class='leftBtn'> 取消</van-button>
      <van-button type="danger" block> 确认</van-button>
    </div>
  </van-dropdown-item>

  <van-dropdown-item title="租金">
<van-picker :columns="columns3" :default-index="0" />
    <div class='btn'>
      <van-button class='leftBtn'> 取消</van-button>
      <van-button type="danger" block> 确认</van-button>
    </div>
  </van-dropdown-item>

  <van-dropdown-item title="筛选" >
    <div>

    </div>
  </van-dropdown-item>
</van-dropdown-menu>
  </div>
</template>

<script>
import { cityRulApi } from '@/api'
export default {
  props: {
    id: Object
  },
  data () {
    return {
      columns: [

        // {
        //   text: null,
        //   children: [
        //     {
        //       text: null,
        //       children: [
        //         {
        //           text: null
        //         }
        //       ]
        //     }

        //   ]
        // }
      ],
      columns2: [],
      columns3: [],
      city: [],
      area: {},
      subway: {},
      price: [],
      rentType: [],
      columnsList: []

    }
  },
  async created () {
    // 获取房屋查询条件
    const res = await cityRulApi(this.id)
    // console.log(res.data.body)
    this.columnsList = [...this.columnsList, res.data.body.area]
    this.columnsList = [...this.columnsList, res.data.body.subway]
    this.columns = [...this.columns, ...this.columnsList]
    this.columns2 = [...this.columns2, ...res.data.body.rentType]
    this.columns3 = [...this.columns3, ...res.data.body.price]
    this.arrFilter(this.columnsList)
    this.arrFilter(this.columns2)
    this.arrFilter(this.columns3)
    console.log(this.columnsList)
    console.log(this.columns)
    // console.log(this.columns2)
    // console.log(this.columns3)
    // console.log(this.area)
  },
  methods: {
    arrFilter (arr) {
      arr.map((item, index) => {
        item.text = item.label
        if (item.children) {
          if (item.children[0].label === '不限') {
            item.children[0].children = []
          }
          item.children.map(item => {
            item.text = item.label
            if (item.children) {
              item.children.map(item => {
                item.text = item.label
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style>
.btn{
  display: flex;
}
.leftBtn{
width: 125px;
background-color:#ffffff;
color:#21b97a;
/* border:transparent; */
border-top-color:#aaaaaa;
border-color:transparent
}
/* .van-picker{
  width: 264px;
} */
</style>
